<template>
	<view>
		<view class="search">
			<uv-row gutter="12">
				<uv-col span="10" style="height: 80rpx;">
					<uv-input class="search_input" placeholder="请输入要查找到的书籍" v-model="keyWords" :prefixIcon="searshs"
						prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
				</uv-col>
				<uv-col span="2">
					<view style="margin-right: 15rpx;text-align: center;margin-bottom: 13rpx;font-size: 32rpx;"
						@click="searsh">搜索</view>
				</uv-col>
			</uv-row>
		</view>

		<view v-if="data" v-for="(item,index) in data" :key="index" style="margin-left: 5%;">
			<!-- <uni-section titleFontSize="32rpx" class="mb-10" title="热门推荐"></uni-section> -->
			<view class="title">
				<view class="mb-10">{{item.dataType}}</view>
				<view class="icon-container">
					<uv-icon v-if="!item.dataTypeId" :name="hots" size="35rpx"></uv-icon>
				</view>
			</view>
			<view class="image-container">
				<view class="image-item" v-for="(i,index) in item.resource" :key="index">
					<uv-image :lazy-load="true" radius="0" @click="tiao(i)" :customStyle="customStyle2"  :src="i.cover" width="211rpx" height="292rpx"></uv-image>
					<text class="image-text">{{i.resourceName}}</text>
				</view>
			</view>
			<uv-divider class="divider" />
		</view>
		<view v-else>
			<uv-empty mode="list" style="margin-top: 50%;"></uv-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import useGetGlobalProperties from '@/util/useGlobal.js';
	const url = useGetGlobalProperties().$httpUrl;
	const urls = useGetGlobalProperties().$https;
	const book = useGetGlobalProperties().$book;
	const audio = useGetGlobalProperties().$audio;
	const journal = useGetGlobalProperties().$journal;
	const user = uni.getStorageSync('userInfo');
	// let s = '<p><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 16px;">本书分为十章，内容包括：蜜蜂生物学基础理论、蜜蜂的饲养管理技术、蜜蜂育种技术、西北地区蜜粉源植物概述、蜜蜂产品及其生产加工技术、蜜蜂授粉技术概论、蜂学术语规范等。</span></p>';
	// const data = ref();
	// const epub = ()=>{
	// 	uni.request({
	// 		url:'/api/ruralLibrary/resource/epub',
	// 		method:'GET',
	// 		success: (res) => {
	// 		data.value = JSON.stringify(res.data)	
	// 		}
	// 	})
	// }
	const customStyle2 = ref({
			boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)'
		});
	onLoad((option) => {
		console.log(option.keys);
		keyWords.value = option.keys;
		console.log(keyWords.value);
		
	});
	onMounted(() => {
		searsh();
	});
	
	const keyWords = ref();
	const data = ref();
	const tiao = (i) => {
		let urls = '';
		if (i.dataTypeId == book) {
			urls = '/pages/index/bookDetail/bookDetail?id=' + i.resourceId
		} else if (i.dataTypeId == audio) {
			urls = '/pages/index/audioDetails/audioDetails?id=' + i.resourceId
		} else if (i.dataTypeId == journal) {
			urls = '/pages/index/journalDetails/journalDetails?id=' + i.resourceName
		}else{
			urls = '/pages/index/videoDetails/videoDetails?id=' + i.resourceId
		}
		uni.navigateTo({
			url: urls
		})
	}
	const searsh = () => {
		uni.showLoading({
			title:'正在加载中'
		})
		uni.request({
			url: urls+'/ruralLibrary/resource/search',
			method:'POST',
			// data:keyWords.value,
			data:{'search':keyWords.value},
			success: (res) => {
				console.log('ser',res.data.data)
				let y = 0;
				for(let i=0;i<res.data.data.length;i++){
					if(res.data.data[i].resource==null){
						// // 移除数组中索引为 i 的元素
						//     res.data.data.splice(i, 1);
						//     // 因为数组长度减小了一个，所以需要将 i 减一
						//     i--;
						y++
					}
				}
				data.value = res.data.data;
				if(y>=data.value.length){
					uni.showToast({
						title: '暂无相关资源',
						icon:'error',
						duration: 1500,
						mask: false
					});
				}
				console.log('data.value',data.value)
				uni.hideLoading()
			}
		})
	}
	onMounted(() => {
	})
</script>

<style>
	.search_input {
		width: 80vw;
		margin-left: 5%;
	}

	.search {
		margin-top: 32rpx;
	}

	.title {
		display: flex;
		align-items: center;
	}

	.mb-10 {
		margin-top: 30rpx;
		margin-bottom: 16rpx;
	}

	.icon-container {
		margin-left: 3px;
		/* 调整图标与文本之间的间距 */
		margin-top: 18rpx;
	}

	.image-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 5%;
	}

	.image-item {
		margin-right: 11px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		/* 添加相对定位 */
		border-radius: 10rpx;

		/* 		margin-bottom: 5px; */
	}

	.image-text {
		text-align: center;
		margin-top: 8px;
		margin-left: 15rpx;
		font-size: 26rpx;
		width: 200rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10%;
	}
</style>